<template>
  <div>
    <top></top>
    <div class="header_con">
      <div class="header">
      </div>
    </div>
    <h2 class="common_title">填写并核对订单信息</h2>
    <h2 class="common_title">请确认信息
      <el-input style="width: 150px" :value="user.username"></el-input>&nbsp;手机号码
      <el-input style="width: 150px" :value="user.phone"></el-input>
    </h2>
    <br><br>
    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
      <dl>
        <dt>寄送到：</dt>
        <dd><input type="radio" name="" checked=""><span v-show="user.address==null || user.address==''">请添加新地址</span>{{user.address}}</dd>
      </dl>
      <a href="#" class="edit_site" @click="open(dialogVisible=true)">新增收货地址</a>
    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
      <div class="pay_style_con clearfix">
        <input type="radio" name="pay_style">
        <label ><span>余额:{{user.umoney}}</span></label>
      </div>
    </div>
    <br><br>


    <div class="common_list_con clearfix">
      <ul class="goods_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
      </ul>
      <ul class="goods_list_td clearfix" v-for="(item,index) in jsljgm">
        <li class="col01">{{ index + 1 }}</li>
        <li class="col02"><img :src="'/src/'+item.commodity.prozimg" alt="图片出错"></li>
        <li class="col03">{{ item.commodity.proname }}</li>
        <li class="col04">500g</li>
        <li class="col05">{{ item.commodity.prosprice }}</li>
        <li class="col06"><input type="button" class="btn-sub" value="-" @click="jj(item.cartid,true,item.quantity)">
          {{ item.quantity }}
          <input type="button" class="btn-add" value="+" @click="jj(item.cartid,false)"></li>
        <li class="col07">{{ item.commodity.prosprice * item.quantity }}</li>
      </ul>
    </div>


    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
      <div class="settle_con">
        <div class="total_goods_count">共<em>{{ sl }}</em>件商品，总金额<b>{{ zongmoney }}</b></div>

      </div>
    </div>

    <div class="order_submit clearfix">
      <a @click="ordertijiaodd()">提交订单</a>
    </div>

    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>

    <div class="popup_con" >
      <div class="popup">
        <p>订单提交成功！</p>
      </div>

      <div class="mask"></div>
    </div>
    <el-dialog
      title="新增地址"
      :visible.sync="dialogVisible"
      width="50%"
      >
      <el-select  v-model="sheng" @change="fun1" placeholder="----请选择---">
        <el-option  v-for="p in provice" :value="p.id" :label="p.name" @click.native="queryshsheng(shenglabel=p.name)">{{p.name}}</el-option>
      </el-select>
      <el-select v-model="shi"  @change="fun2" placeholder="----请选择---">
        <el-option  v-for="c in ctiy" :value="c.id" :label="c.name" @click.native="queryshshi(shilabel=c.name)">{{c.name}}</el-option>
      </el-select>
      <el-select v-model="qq" placeholder="----请选择---">
        <el-option v-for="d in district" :value="d.id" :label="d.name" @click.native="queryshqu(qqlabel=d.name)">{{d.name}}</el-option>
      </el-select>
      <br>
      <el-radio-group v-model="redio">
      <el-radio  v-for="po in pos"  style="margin-top: 20px"   :label="po.shaddress"></el-radio>
      </el-radio-group>
      <span v-show="pos==null || pos=='' ">你选的地方暂时没有商户入驻请换个地方吧</span>
      <span  slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="qwq">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import IndexTop from "../User/IndexTop";
/*import {Loading} from "_element-ui@2.15.6@element-ui";*/

import {Loading} from "element-ui";
export default {
  inject:["reload"],
  name: "OrderTijiao",
  data() {
    return {
      userinfo: JSON.parse(this.$route.query.res),
      list: [],
      uid: sessionStorage.getItem('id'),
      jsljgm: [],
      user:[],
      dialogVisible:false,
      addr:"",
      shi:"",
      sheng:"",
      provice:[],
      ctiy:[],
      district:[],
      qq:"",
      shenglabel:"",
      qqlabel:"",
      shilabel:"",
      pos:null,
      redio:null,
      shid:null
    }
  },
  components: {
    top: IndexTop,
  },
  methods: {
    //寻找商户地址按省
    queryshsheng(){
      var _this=this
      var params=new URLSearchParams()
      params.append("shaddress",_this.shenglabel)
      this.$axios.post("querylikesh.action",params).then(val=>{
          _this.pos=val.data
          _this.pos.forEach(item=>{
            console.log(item.shaddress)
          })
        }
      ).catch()
    },
    //寻找商户地址按市
    queryshshi(){
      var _this=this
      var params=new URLSearchParams()
      if(_this.shenglabel==null){
        _this.shenglabel=null
      }
     if(_this.shilabel==null){
       _this.shilabel=null
     }
     var stqwq=[_this.shenglabel,_this.shilabel]
      var str=stqwq.join("")
       params.append("shaddress",str)
      // params.append("shaddress",_this.shilabel)
      this.$axios.post("querylikesh.action",params).then(val=>{
          _this.pos=val.data
          _this.pos.forEach(item=>{
            console.log(item.shaddress)
          })
        }
      ).catch()
    },
    //寻找商户地址按区
    queryshqu(){
      var _this=this
      var params=new URLSearchParams()
      if(_this.shenglabel==null){
        _this.shenglabel=null
      }
      if(_this.shilabel==null){
        _this.shilabel=null
      }
      if(_this.qqlabel==null){
        _this.qqlabel==null
      }
      var stqwq=[_this.shenglabel,_this.shilabel,_this.qqlabel]
      var str=stqwq.join("")
      params.append("shaddress",str)
      // params.append("shaddress",_this.shilabel)
      this.$axios.post("querylikesh.action",params).then(val=>{
          _this.pos=val.data
          _this.pos.forEach(item=>{
            console.log(item.shaddress+"204行")
          })
        }
      ).catch()
    },
    //新增地址
    qwq(){
      this.loadingInstance = Loading.service({
        text:'桥豆麻袋',
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var _this=this
      if (_this.redio == null || _this.redio=='') {
        this.$message({
          type: 'warning',
          message: '请选择一条数据!'
        })
        _this.dialogVisible=true
        this.loadingInstance.close();
        return false;
      }
       //  var arr=[_this.shenglabel,_this.shilabel,_this.qqlabel,_this.addr]
       // var str=arr.join("")
       var params = new URLSearchParams();
       params.append("address",_this.redio)
       params.append("id",_this.uid)
       this.$axios.post("addaddress.action",params).then(val=>{
         if(val!=null){
          setTimeout(()=>{
            this.loadingInstance.close();
            this.$message.success("添加成功")
            this.reload()
            _this.dialogVisible=false
          },500)
         }
       }).catch()
      var params2 = new URLSearchParams();
      params2.append("shaddress",_this.redio)
      console.log("單選框的值"+_this.redio)
      this.$axios.post("queryshid.action",params2).then(val=>{
        console.log(val.data.id+"選擇的id")
        _this.shid=val.data.id
      }).catch()
    },
    //选择市
    fun2(){
      var _this = this;
      var params=new URLSearchParams();
      params.append("id",this.shi)
      this.$axios.post("queryChinaByQu.action",params).then(val=>{
          _this.district=val.data
      }
      ).catch()
    },
    //选择省
    fun1(){
      var _this = this;
      var params=new URLSearchParams();
      params.append("id",this.sheng)
      this.$axios.post("queryChinaByShi.action",params).then(val=>{
        _this.ctiy=val.data
        }
      ).catch()
    },
    //添加地址
    open(){
      //选择省
      var _this=this;
     this.$nextTick(jj=>{
       this.$axios.post("queryAllSheng.action").then(val=>{
         _this.provice=val.data;
       }).catch()
     })
    },
    //查询当前用户购物车和商品
    queryusergwc() {
if (this.userinfo.length>=1){
  this.userinfo.forEach(item => {
    this.list.push(item.cid)
  })
}else{
  this.list.push(this.userinfo.cid)
}
      var params = new URLSearchParams();

      params.append("list", this.list);
      params.append("uid", this.uid);
      params.append("sid",this.shid);

      this.$axios.post("queryusergwc", params).then(res => {
        this.jsljgm = res.data;
      }).catch()
      //用户信息查询
      var params2 = new URLSearchParams();
      params2.append("id",this.uid);
      this.$axios.post("selsid.action", params2).then(res => {
        this.user = res.data;
        console.log(this.user.shaddress)
        var params3 = new URLSearchParams()
        params3.append("shaddress",this.user.address)
        this.$axios.post("queryshidd.action",params3).then(val=>{
          console.log("進來的商戶id"+val.data.id)
          this.shid=val.data.id
        }).catch()
      }).catch()
    },
    //提交订单
    ordertijiaodd() {
      console.log(this.user)
      console.log(this.shid)
      if (this.user.address==null||this.user.address==''){
        this.$message.error("请选择地址")
        return false;
      }else{
        var params = new URLSearchParams();
        //用户id
        params.append("uid", this.uid);

        //商品id
        params.append("list", this.list);
        //当前状态 （有无付款）
        params.append("status",2);
        //订单总价
        params.append("zprice",this.zongmoney)
        params.append('sid',this.shid)
        this.$axios.post("usertijiaodd.action", params).then(res => {
          if (res.data.code==0){
            this.$message.error(res.data.msg);
            this.$router.push('/personalCenter')
            this.$emit("event-name")
          }else{
            this.$message.success(res.data.msg);
            this.$router.push('/personalCenter')
          }
        }).catch()
      }

    },
    //购物车数量加减跟删除
    jj(id, boolean, sl) {
      console.log(boolean)
      console.log(sl)
      if (boolean == true && sl == 1) {
        if (confirm("您确定要移除购物车吗?")) {
          var params = new URLSearchParams();
          params.append("cartid", id);
          params.append("pdjj", boolean)
          this.$axios.post("gwcssjj.action", params).then(res => {

            this.queryshopping();
          }).catch();
        } else {
          return
        }
      }
      var params = new URLSearchParams();
      params.append("cartid", id);
      params.append("pdjj", boolean)
      this.$axios.post("gwcssjj.action", params).then(res => {

        this.queryusergwc();
      }).catch();
    },
  },
  computed: {


    //总金额
    zongmoney: function () {
      let s = 0;
      this.jsljgm.forEach(item => {
        s += item.commodity.prosprice * item.quantity;
      })
      return s;
    },
    //总数量
    sl: function () {
      let s = 0;
      this.jsljgm.forEach(item => {
        s += item.quantity;
      })
      return s;
    }
  },
  created() {
    this.queryusergwc();
  }
}
</script>

<style scoped>

.btn-add,
.btn-sub {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid gray;
  background: linear-gradient(currentColor, currentColor) no-repeat center/.875em 2px,
  linear-gradient(currentColor, currentColor) no-repeat center/2px .875em,
  ghostwhite;
  color: dimgray;
}

.btn-sub {
  background-size: .875em 2px, 0;
}

body {
  font-family: 'Microsoft Yahei';
  font-size: 12px;
  color: #666;
}

html, body {
  height: 100%
}
li{
  list-style: none;
}
/* 顶部样式 */
.header_con {
  background-color: #f7f7f7;
  height: 29px;
  border-bottom: 1px solid #dddddd
}

.header {
  width: 1200px;
  height: 29px;
  margin: 0 auto;
}

.welcome, .login_info, .login_btn, .user_link {
  line-height: 29px;
}

.login_info {
  display: none;
}

.login_info em {
  color: #ff8800
}

.login_btn a, .user_link a {
  color: #666;
}

.login_btn a:hover, .user_link a:hover {
  color: #ff8800;
}

.login_btn span, .user_link span {
  color: #cecece;
  margin: 0 10px;
}


/* logo、搜索框、购物车样式 */

.search_bar {
  width: 1200px;
  height: 115px;
  margin: 0 auto;
}

.logo {
  width: 150px;
  height: 59px;
  margin: 29px 0 0 17px;
}


.search_con .input_text {
  width: 470px;
  height: 34px;
  border: 0px;
  margin: 2px 0 0 36px;
  outline: none;
  font-size: 12px;
  color: #737272;
  font-family: 'Microsoft Yahei'
}

.search_con .input_btn {
  width: 100px;
  height: 38px;
  background-color: #37ab40;
  border: 0px;
  font-size: 14px;
  color: #fff;
  font-family: 'Microsoft Yahei';
  outline: none;
  cursor: pointer;
}


/* 菜单、幻灯片样式 */

.navbar_con {
  height: 40px;
  border-bottom: 2px solid #39a93e
}

.navbar {
  width: 1200px;
  margin: 0 auto;
}

.navbar h1 {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #39a93e;
}

.navbar .subnav_con {
  width: 200px;
  height: 40px;
  background-color: #39a93e;
  position: relative;
  cursor: pointer;
}

.navbar .subnav_con h1 {
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  text-indent: 40px
}


.navbar .subnav_con:hover span {
  transform: rotateZ(180deg)
}

.navbar .subnav_con .subnav {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
  border-top: 2px solid #39a93e;
}

.navbar .subnav_con:hover .subnav {
  display: block;
}


.navlist {
  margin-left: 34px;
}

.navlist li {
  height: 40px;
  float: left;
  line-height: 40px;
}

.navlist li a {
  color: #666;
  font-size: 14px
}

.navlist li a:hover {
  color: #ff8800
}

.navlist .interval {
  margin: 0 15px;
}


.center_con {
  width: 1200px;
  height: 270px;
  margin: 0 auto;
}

.subnav {
  width: 198px;
  height: 270px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}


.subnav li a {
  display: block;
  height: 44px;
  line-height: 44px;
  text-indent: 71px;
  font-size: 14px;
  color: #333
}

.subnav li a:hover {
  color: #ff8800
}


.slide {
  width: 760px;
  height: 270px;
  position: relative;
  overflow: hidden;
}

.slide .slide_pics {
  position: relative;
  left: 0;
  top: 0;
  width: 760px;
  height: 270px;
}

.slide .slide_pics li {
  width: 760px;
  height: 270px;
  position: absolute;
  left: 0;
  top: 0
}

.slide .next {
  background-position: left -428px;
  left: 732px;
}

.points {
  width: 100%;
  height: 11px;
  position: absolute;
  left: 0;
  top: 250px;
  text-align: center;
}

.points li {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 5px;
  background-color: #9f9f9f;
  border-radius: 50%;
  cursor: pointer;
}

.points li.active {
  background-color: #cecece
}

.adv {
  width: 240px;
  height: 270px;
  overflow: hidden;
  background-color: gold;
}

.adv a {
  display: block;
  float: left;
}


/* 商品列表样式 */

.list_model {
  width: 1200px;
  height: 340px;
  margin: 15px auto 0;
}

.list_title {
  height: 40px;
  border-bottom: 2px solid #42ad46
}

.list_title h3 {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #37ab40;
  font-weight: bold;
}

.list_title .subtitle {
  height: 20px;
  line-height: 20px;
  margin-top: 15px;
}

.list_title .subtitle span {
  color: #666;
  margin: 0 10px 0 20px;
}

.list_title .subtitle a {
  color: #666;
  margin: 0 5px;
}

.list_title .subtitle a:hover, .goods_more:hover {
  color: #ff8800
}

.goods_more {
  height: 20px;
  margin-top: 15px;
  color: #666
}

.goods_con {
  height: 300px;
}

.goods_banner {
  width: 200px;
  height: 300px;
}

.goods_banner img {
  width: 200px;
  height: 300px;
}

.goods_list {
  width: 1000px;
  height: 299px;
  border-bottom: 1px solid #ededed
}

.goods_list li {
  height: 299px;
  width: 249px;
  border-right: 1px solid #ededed;
  float: left
}

.goods_list li:hover {
  width: 248px;
  height: 297px;
  border: 1px solid gold;
}

.goods_list li:hover img {
  opacity: 0.8
}

.goods_list li h4 {
  width: 200px;
  height: 50px;
  margin: 20px auto 0;
  text-align: center;
}

.goods_list li h4 a {
  font-size: 14px;
  color: #666;
  font-weight: normal;
  line-height: 24px;
}

.goods_list li h4 a:hover {
  color: #ff8800
}

.goods_list li img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

.goods_list li .prize {
  text-align: center;
  font-size: 20px;
  color: #c40000;
  margin-top: 5px;
}

/* 页面底部样式 */
.footer {
  border-top: 2px solid #42ad46;
  margin: 30px 0;
}

.foot_link {
  text-align: center;
  margin-top: 30px;
}

.foot_link a, .foot_link span {
  color: #4e4e4e;
}

.foot_link a:hover {
  color: #ff8800
}

.foot_link span {
  padding: 0 10px
}

.footer p {
  text-align: center;
  margin-top: 10px;
}


/* 二级页面面包屑导航 */
.breadcrumb {
  width: 1200px;
  height: 40px;
  margin: 0 auto;
}

.breadcrumb a {
  line-height: 40px;
  color: #37ab40
}

.breadcrumb a:hover {
  color: #ff8800
}

.breadcrumb span {
  line-height: 40px;
  color: #666;
  padding: 0 5px;
}


.main_wrap {
  width: 1200px;
  margin: 0 auto;
}

.l_wrap {
  width: 200px;
}

.r_wrap {
  width: 980px;
}


/* 新品推荐样式 */

.new_goods {
  border: 1px solid #ededed;
  border-top: 2px solid #37ab40;
  padding-bottom: 10px;
}

.new_goods h3 {
  height: 33px;
  line-height: 33px;
  background-color: #fcfcfc;
  border-bottom: 1px solid #ededed;
  font-size: 14px;
  font-weight: normal;
  text-indent: 10px;
}

.new_goods ul {
  width: 160px;
  margin: 0 auto;
  overflow: hidden;
}

.new_goods li {
  border-bottom: 1px solid #ededed;
  margin-bottom: -1px;
}

.new_goods li img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 10px auto;
}

.new_goods li h4 {
  width: 160px;
  margin: 0 auto;
}

.new_goods li h4 a {
  font-weight: normal;
  color: #666;
  display: block;
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.new_goods li .prize {
  font-size: 14px;
  color: #da260e;
  margin: 10px auto;
}


/* 商品列表样式 */

.sort_bar {
  height: 30px;
  background-color: #f0fdec
}

.sort_bar a {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  float: left;
  color: #000
}

.sort_bar .active {
  background-color: #37ab40;
  color: #fff;
}


.goods_type_list {
  margin: 10px auto 0;
}

.goods_type_list li {
  width: 196px;
  float: left;
  margin-bottom: 10px
}

.goods_type_list li img {
  width: 160px;
  height: 160px;
  display: block;
  margin: 10px auto;
}

.goods_type_list li h4 {
  width: 160px;
  margin: 0 auto;
}

.goods_type_list li h4 a {
  font-weight: normal;
  color: #666;
  display: block;
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.operate {
  width: 160px;
  margin: 10px auto;
  position: relative;
}

.goods_type_list .operate .prize {
  color: #da260e;
  font-size: 14px;
}

.goods_type_list .operate .unit {
  color: #999;
  padding-left: 5px;
}


/* 分页样式 */

.pagenation {
  height: 32px;
  text-align: center;
  font-size: 0;
  margin: 30px auto;
}

.pagenation a {
  display: inline-block;
  border: 1px solid #d2d2d2;
  background-color: #f8f6f7;
  font-size: 12px;
  padding: 7px 10px;
  color: #666;
  margin: 5px
}

.pagenation .active {
  background-color: #fff;
  color: #43a200
}


/* 商品详情样式 */
.goods_detail_con {
  width: 1198px;
  height: 398px;
  border: 1px solid #ededed;
  margin: 0 auto 20px;
}

.goods_detail_pic {
  width: 350px;
  height: 350px;
  margin: 24px 0 0 24px;
}

.goods_detail_list {
  width: 730px;
  height: 350px;
  margin: 24px 24px 0 0;
}

.goods_detail_list h3 {
  font-size: 24px;
  line-height: 24px;
  color: #666;
  font-weight: normal;
}

.goods_detail_list p {
  color: #666;
  line-height: 40px;
}

.prize_bar {
  height: 72px;
  background-color: #fff5f5;
  line-height: 72px;
}

.prize_bar .show_pirze {
  font-size: 20px;
  color: #ff3e3e;
  padding-left: 20px
}

.prize_bar .show_pirze em {
  font-style: normal;
  font-size: 36px;
  padding-left: 10px
}

.prize_bar .show_unit {
  padding-left: 150px
}


.goods_num .num_name {
  width: 70px;
  height: 52px;
  line-height: 52px;
}

.goods_num .num_add {
  width: 75px;
  height: 50px;
  border: 1px solid #dddddd
}

.goods_num .num_add input {
  width: 49px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 0px;
  outline: none;
  font-size: 14px;
  color: #666
}

.goods_num .num_add .add, .goods_num .num_add .minus {
  width: 25px;
  line-height: 25px;
  text-align: center;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #666;
  font-size: 14px
}

.goods_num .num_add .minus {
  border-bottom: 0px
}

.total {
  height: 35px;
  line-height: 35px;
  margin-top: 25px;
}

.total em {
  font-style: normal;
  color: #ff3e3e;
  font-size: 18px
}

.operate_btn .buy_btn, .operate_btn .add_cart {
  display: inline-block;
  width: 178px;
  height: 38px;
  border: 1px solid #c40000;
  font-size: 14px;
  color: #c40000;
  line-height: 38px;
  text-align: center;
  background-color: #ffeded;
}

.operate_btn .add_cart {
  background-color: #c40000;
  color: #fff;
  margin-left: 10px;
  position: relative;
  z-index: 10;
}


.detail_tab li {
  height: 34px;
  line-height: 34px;
  padding: 0 30px;
  font-size: 14px;
  color: #333333;
  float: left;
  border: 1px solid #e8e8e8;
  border-bottom: 0px;
  cursor: pointer;
  background-color: #faf8f8
}

.detail_tab li.active {
  border-top: 2px solid #37ab40;
  position: relative;
  background-color: #fff;
  border-left: 1px solid #37ab40;
  border-right: 1px solid #37ab40;
  top: -1px;
  height: 35px;
}

.tab_content dt {
  margin-top: 10px;
  font-size: 16px;
  color: #044d39
}

.tab_content dd {
  line-height: 24px;
  margin-top: 5px;
}


.login_title h1 {
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  color: #a8a8a8;
  float: left;
  font-weight: bold;
  margin-left: 44px;
}


.pwd_error {
  top: 110px;
}

.more_input {
  position: absolute;
  left: 0;
  top: 130px;
  width: 100%
}

.more_input input {
  float: left;
  margin-top: 2px;
}

.more_input label {
  float: left;
  margin-left: 10px;
}

.more_input a {
  float: right;
  color: #666
}

.more_input a:hover {
  color: #ff8800
}

.input_submit {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  top: 180px;
  background-color: #47aa34;
  color: #fff;
  font-size: 22px;
  border: 0px;
  font-family: 'Microsoft Yahei';
  cursor: pointer;
}


/* 注册页面 */
.register_con {
  width: 700px;
  height: 560px;
  margin: 50px auto 0;

}

.l_con {
  width: 300px;
}

.reg_logo {
  width: 200px;
  height: 76px;
  float: right;
  margin-right: 30px;
}

.reg_slogan {
  width: 300px;
  height: 30px;
  float: right;
  text-align: right;
  font-size: 24px;
  color: #69a81e;
  margin: 20px 30px 0 0;
}


.r_con {
  width: 400px;
}

.reg_title {
  width: 360px;
  height: 50px;
  float: left;
  margin-left: 30px;
  border-bottom: 1px solid #e0e0e0
}

.reg_title h1 {
  height: 50px;
  line-height: 50px;
  float: left;
  font-size: 24px;
  color: #a8a8a8;
  font-weight: bold;
}

.reg_form {
  width: 360px;
  margin: 30px 0 0 30px;
  float: left;
  position: relative;
}

.reg_form li {
  height: 70px;
}

.reg_form li label {
  width: 70px;
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 14px;
  color: #a8a8a8
}

.reg_form li input {
  width: 288px;
  height: 38px;
  border: 1px solid #e0e0e0;
  float: left;
  outline: none;
  text-indent: 10px;
  background-color: #f8f8f8
}

.reg_form li.agreement input {
  width: 15px;
  height: 15px;
  float: left;
  margin-top: 13px
}

.reg_form li.agreement label {
  width: 300px;
  float: left;
  margin-left: 10px;
}

.reg_form li.reg_sub input {
  width: 360px;
  height: 40px;
  background-color: #47aa34;
  font-size: 18px;
  color: #fff;
  font-family: 'Microsoft Yahei';
  cursor: pointer;
}

.reg_form li .error_tip {
  float: left;
  height: 30px;
  line-height: 30px;
  margin-left: 70px;
  color: #e62e2e;
  display: none;
}

.reg_form li .error_tip2 {
  float: left;
  height: 20px;
  line-height: 20px;
  color: #e62e2e;
  display: none;
}


.sub_page_name {
  font-size: 18px;
  color: #666;
  margin: 50px 0 0 20px
}

.total_count {
  width: 1200px;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.total_count em {
  font-size: 16px;
  color: #ff4200;
  margin: 0 5px;
}

.cart_list_th {
  width: 1198px;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
  margin: 0 auto;
}

.cart_list_th li {
  height: 40px;
  line-height: 40px;
  float: left;
  text-align: center;
}

.cart_list_th .col01 {
  width: 26%;
}

.cart_list_th .col02 {
  width: 16%;
}

.cart_list_th .col03 {
  width: 13%;
}

.cart_list_th .col04 {
  width: 12%;
}

.cart_list_th .col05 {
  width: 15%;
}

.cart_list_th .col06 {
  width: 18%;
}

.cart_list_td {
  width: 1198px;
  border: 1px solid #ddd;
  background-color: #edfff9;
  margin: 0 auto;
  margin-top: -1px;
}

.cart_list_td li {
  height: 120px;
  line-height: 120px;
  float: left;
  text-align: center;
}

.cart_list_td .col01 {
  width: 4%;
}

.cart_list_td .col02 {
  width: 12%;
}

.cart_list_td .col03 {
  width: 10%;
}

.cart_list_td .col04 {
  width: 16%;
}

.cart_list_td .col05 {
  width: 13%;
}

.cart_list_td .col06 {
  width: 12%;
}

.cart_list_td .col07 {
  width: 15%;
}

.cart_list_td .col08 {
  width: 18%;
}

.cart_list_td .col02 img {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  display: block;
  margin: 10px auto 0;
}

.cart_list_td .col03 {
  height: 48px;
  text-align: left;
  line-height: 24px;
  margin-top: 38px;
}

.cart_list_td .col03 em {
  color: #999
}

.cart_list_td .col08 a {
  color: #666
}

.cart_list_td .col06 .num_add {
  width: 98px;
  height: 28px;
  border: 1px solid #ddd;
  margin: 40px auto 0;
}

.cart_list_td .col06 .num_add a {
  width: 29px;
  height: 28px;
  line-height: 28px;
  background-color: #f3f3f3;
  font-size: 14px;
  color: #666
}

.cart_list_td .col06 .num_add input {
  width: 38px;
  height: 28px;
  text-align: center;
  line-height: 30px;
  border: 0px;
  display: block;
  float: left;
  outline: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}


.settlements {
  width: 1198px;
  height: 78px;
  border: 1px solid #ddd;
  background-color: #fff4e8;
  margin: -1px auto 0;
}

.settlements li {
  line-height: 78px;
  float: left;
}

.settlements .col01 {
  width: 4%;
  text-align: center
}

.settlements .col02 {
  width: 12%;
}

.settlements .col03 {
  width: 69%;
  height: 48px;
  line-height: 28px;
  text-align: right;
  margin-top: 10px;
}

.settlements .col03 span {
  color: #ff0000;
  padding-right: 5px
}

.settlements .col03 em {
  color: #ff3d3d;
  font-size: 22px;
  font-weight: bold;
}

.settlements .col03 span {
  color: #ff0000;
}

.settlements .col03 b {
  color: #ff0000;
  font-size: 14px;
  padding: 0 5px;
}

.settlements .col04 {
  width: 14%;
  text-align: center;
  float: right;
}

.settlements .col04 a {
  display: block;
  height: 78px;
  background-color: #ff3d3d;
  text-align: center;
  line-height: 78px;
  color: #fff;
  font-size: 24px
}


.common_title {
  width: 1200px;
  margin: 20px auto 0;
  font-size: 14px;
}

.common_list_con {
  width: 1200px;
  border: 1px solid #dddddd;
  border-top: 2px solid #00bc6f;
  margin: 10px auto 0;
  background-color: #f7f7f7;
  position: relative;
}

.common_list_con dl {
  margin: 20px;
}

.common_list_con dt {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px
}

.common_list_con dd input {
  vertical-align: bottom;
  margin-right: 10px
}

.edit_site {
  position: absolute;
  right: 20px;
  top: 30px;
  width: 100px;
  height: 30px;
  background-color: #37ab40;
  text-align: center;
  line-height: 30px;
  color: #fff
}

.pay_style_con {
  margin: 20px;
}

.pay_style_con input {
  float: left;
  margin: 14px 7px 0 0;
}

.pay_style_con label {
  float: left;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 10px 10px 10px 40px;
  margin-right: 25px
}


.goods_list_th {
  height: 40px;
  border-bottom: 1px solid #ccc
}

.goods_list_th li {
  float: left;
  line-height: 40px;
  text-align: center;
}

.goods_list_th .col01 {
  width: 25%
}

.goods_list_th .col02 {
  width: 20%
}

.goods_list_th .col03 {
  width: 25%
}

.goods_list_th .col04 {
  width: 15%
}

.goods_list_th .col05 {
  width: 15%
}

.goods_list_td {
  height: 80px;
  border-bottom: 1px solid #eeeded
}

.goods_list_td li {
  float: left;
  line-height: 80px;
  text-align: center;
}

.goods_list_td .col01 {
  width: 4%
}

.goods_list_td .col02 {
  width: 6%
}

.goods_list_td .col03 {
  width: 15%
}

.goods_list_td .col04 {
  width: 20%
}

.goods_list_td .col05 {
  width: 25%
}

.goods_list_td .col06 {
  width: 15%
}

.goods_list_td .col07 {
  width: 15%
}

.goods_list_td .col02 {
  text-align: right
}

.goods_list_td .col02 img {
  width: 63px;
  height: 63px;
  border: 1px solid #ddd;
  display: block;
  margin: 7px 0;
  float: right;
}

.goods_list_td .col03 {
  text-align: left;
  text-indent: 20px
}


.settle_con {
  margin: 10px
}

.total_goods_count, .transit, .total_pay {
  line-height: 24px;
  text-align: right
}

.total_goods_count em, .total_goods_count b, .transit b, .total_pay b {
  font-size: 14px;
  color: #ff4200;
  padding: 0 5px;
}

.order_submit {
  width: 1200px;
  margin: 20px auto;
}

.order_submit a {
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #47aa34;
  color: #fff;
  font-size: 16px;
  display: block;
  float: right
}


.order_list_th {
  width: 1198px;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
  margin: 20px auto 0;
}

.order_list_th li {
  float: left;
  height: 30px;
  line-height: 30px
}

.order_list_th .col01 {
  width: 20%;
  margin-left: 20px
}

.order_list_th .col02 {
  width: 20%
}


.order_list_table {
  width: 1200px;
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid #ddd;
  margin: -1px auto 0;
}

.order_list_table td {
  border: 1px solid #ddd;
  text-align: center;
}

.order_goods_list {
  border-bottom: 1px solid #ddd;
  margin-bottom: -2px;
}

.order_goods_list li {
  float: left;
  height: 80px;
  line-height: 80px;
}

.order_goods_list .col01 {
  width: 20%
}

.order_goods_list .col01 img {
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  margin: 10px auto;
}

.order_goods_list .col02 {
  width: 50%;
  text-align: left;
}

.order_goods_list .col02 em {
  color: #999;
  margin-left: 10px
}

.order_goods_list .col03 {
  width: 10%
}

.order_goods_list .col04 {
  width: 20%
}

.oper_btn {
  display: inline-block;
  border: 1px solid #ddd;
  color: #666;
  padding: 5px 10px
}

.popup_con {
  display: none;
}

.popup {
  width: 300px;
  height: 150px;
  border: 1px solid #dddddd;
  border-top: 2px solid #00bc6f;
  background-color: #f7f7f7;
  position: fixed;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -75px;
  z-index: 1000;
}

.popup p {
  height: 150px;
  line-height: 150px;
  text-align: center;
  font-size: 18px;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: 999;
}


.main_con {
  width: 1200px;
  margin: 0 auto;

}

.left_menu_con {
  width: 200px;
  float: left;
}

.left_menu_con h3 {
  font-size: 16px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  margin-bottom: 10px;
}

.left_menu_con ul li {
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}

.left_menu_con ul li a {
  color: #666;
}

.left_menu_con ul li .active {
  color: #ff8800;
  font-weight: bold;
}

.right_content {
  width: 980px;
  float: right;
  min-height: 500px;
}

.w980 {
  width: 980px;
}

.w978 {
  width: 978px;
}


.common_title2 {
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  margin: 10px 0;
}

.user_info_list {
  background-color: #f9f9f9;
  margin: 10px 0 15px;
  padding: 10px 0;
  height: 90px;
}

.user_info_list li {
  line-height: 30px;
  text-indent: 30px;
  font-size: 14px;
}

.user_info_list li span {
  width: 100px;
  float: left;
  text-align: right;
}

.info_con {
  width: 980px;
}

.info_l {
  width: 600px;
  float: left;
}

.info_r {
  width: 360px;
  float: right;
}

.site_con {
  background-color: #f9f9f9;
  padding: 10px 0;
  margin-bottom: 20px;
}

.site_con dt {
  font-size: 14px;
  line-height: 30px;
  text-indent: 30px;
  font-weight: bold;
}

.site_con dd {
  font-size: 14px;
  line-height: 30px;
  text-indent: 30px;
}

.site_con .form_group {
  height: 40px;
  line-height: 40px;
  margin-top: 10px;
}

.site_con .form_group label {
  width: 100px;
  float: left;
  text-align: right;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.site_con .form_group input {
  width: 300px;
  height: 25px;
  border: 1px solid #ddd;
  float: left;
  outline: none;
  margin-top: 7px;
  text-indent: 10px;
}

.site_con .form_group2 {
  height: 90px;
}

.site_area {
  width: 280px;
  height: 60px;
  border: 1px solid #ddd;
  outline: none;
  padding: 10px;
}

.info_submit {
  width: 80px;
  height: 30px;
  background-color: #37ab40;
  border: 0px;
  color: #fff;
  margin: 10px 0 10px 100px;
  cursor: pointer;
  font-family: 'Microsoft Yahei'
}

.stress {
  color: #ff8800;
}
</style>
